<div class="content-section introduction">
    <div class="feature-intro">
        <h1>TreeTable <span>ContextMenu</span></h1>
        <p>TreeTable has exclusive integration with ContextMenu.</p>
    </div>
    <app-demoActions github="treetable" stackblitz="treetablecontextmenu-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <p-toast></p-toast>
        
        <p-treeTable [value]="files" [columns]="cols" dataKey="name" [(contextMenuSelection)]="selectedNode" [contextMenu]="cm">
            <ng-template pTemplate="header" let-columns>
                <tr>
                    <th *ngFor="let col of columns">
                        {{col.header}}
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
                <tr [ttContextMenuRow]="rowNode">
                    <td *ngFor="let col of columns; let i = index">
                        <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                        {{rowData[col.field]}}
                    </td>
                </tr>
            </ng-template>
        </p-treeTable>
        
        <p-contextMenu #cm [model]="items"></p-contextMenu>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/treetable" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-treetablecontextmenu-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast [style]="&#123;marginTop: '80px'&#125;"&gt;&lt;/p-toast&gt;

&lt;p-treeTable [value]="files" [columns]="cols" dataKey="name" [(contextMenuSelection)]="selectedNode" [contextMenu]="cm"&gt;
    &lt;ng-template pTemplate="header" let-columns&gt;
        &lt;tr&gt;
            &lt;th *ngFor="let col of columns"&gt;
                &#123;&#123;col.header&#125;&#125;
            &lt;/th&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns"&gt;
        &lt;tr [ttContextMenuRow]="rowNode"&gt;
            &lt;td *ngFor="let col of columns; let i = index"&gt;
                &lt;p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"&gt;&lt;/p-treeTableToggler&gt;
                &#123;&#123;rowData[col.field]&#125;&#125;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/ng-template&gt;
&lt;/p-treeTable&gt;

&lt;p-contextMenu #cm [model]="items"&gt;&lt;/p-contextMenu&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class TreeTableContextMenuDemo &#123;

    files: TreeNode[];

    selectedNode: TreeNode;

    cols: any[];

    items: MenuItem[];

    constructor(private nodeService: NodeService, private messageService: MessageService) &#123; &#125;

    ngOnInit() &#123;
        this.nodeService.getFilesystem().then(files => this.files = files);

        this.cols = [
            &#123; field: 'name', header: 'Name' &#125;,
            &#123; field: 'size', header: 'Size' &#125;,
            &#123; field: 'type', header: 'Type' &#125;
        ];

        this.items = [
            &#123; label: 'View', icon: 'pi pi-search', command: (event) => this.viewFile(this.selectedNode) &#125;,
            &#123; label: 'Toggle', icon: 'pi pi-sort', command: (event) => this.toggleFile(this.selectedNode) &#125;
        ];
    &#125;

    viewFile(node) &#123;
        this.messageService.add(&#123; severity: 'info', summary: 'File Selected', detail: node.data.name + ' - ' + node.data.size &#125;);
    &#125;

    toggleFile(node) &#123;
        node.expanded = !node.expanded;
        this.files = [...this.files];
    &#125;
&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-treetablecontextmenu-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
